import React, { useState, useEffect } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";
import { Toast, NavBar, InfiniteScroll } from "antd-mobile";
//import axios from "axios";
import http from '../../api/http'
import styles from "./list.module.css";

function Index() {
  const navigate = useNavigate();
  const [sp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");
  const [airList, setAirList] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const FeachList = async () => {
    const res = await http.get("/api/trip/airplane", {
      params: { start, end, page },
    });

    if (res.data.code === 200) {
      setAirList([...airList, ...res.data.data]);
      setPage(page + 1);
    } else {
      Toast.show({
        icon: "fail",
        content: res.data.message,
      });
    }

    if (res.data.data.length === 0) {
      setHasMore(false);
    }
  };

  useEffect(() => {
    FeachList();
  }, []);

  const handelToDetail = (item) => {
    navigate(`/detail?start=${start}&end=${end}`, { state: item });
  };

  return (
    <div>
      <NavBar onBack={() => navigate("/")}>
        <span>{start}</span>
        <span className={styles.allrowRight}>➡️</span>
        <span>{end}</span>
      </NavBar>
      <div className={styles.list}>
        {airList.length > 0 &&
          airList.map((item, ind) => (
            <div
              key={ind}
              className={styles.listItem}
              onClick={() => handelToDetail(item)}
            >
              <div className={styles.listHeader}>
                <div className={styles.itemLeft}>
                  <div>
                    <p>{item.dst}</p>
                    <p>
                      {item.dasn} {item.dat}
                    </p>
                  </div>
                  <div style={{ margin: "0 10px" }}>====&gt;</div>
                  <div>
                    <p>{item.ast}</p>
                    <p>
                      {item.aasn} {item.aat}
                    </p>
                  </div>
                </div>
                <div className={styles.itemRight}>￥{item.lps[0].atp}</div>
              </div>
              <div className={styles.listParams}>
                <span>{item.ss[0].asn}</span> | <span>{item.ss[0].amn}</span>
              </div>
            </div>
          ))}
      </div>
      <InfiniteScroll loadMore={FeachList} hasMore={hasMore} />
    </div>
  );
}

export default Index;
